<template>
  <div class="wallet-all-wrapper">
    <div class="operate">
      <Button type="primary" @click="rechargeShow">充值</Button>
      <Button type="success" @click="transferShow">转账</Button>
      <Button type="warning" @click="withdrawalShow">提现</Button>
    </div>
    <div class="count-list one">
      <div class="count-item">
        <div class="counts">{{wallet.saleMoney||0}}</div>
        <div>冻结资金总额</div>
      </div>
      <div class="count-item">
        <div class="counts">{{wallet.memberApplyMoney||0}}</div>
        <div>回收焕贝总额</div>
      </div>
    </div>
    <div class="count-list two">
      <div class="count-item" @click="toList('wallet-recharge')">
        <div class="counts">{{wallet.rechargeMoney||0}}</div>
        <div>充值钱包余额</div>
      </div>
      <div class="count-item" @click="toList('wallet-extension')">
        <div class="counts">{{wallet.promoteHyMoney||0}}</div>
        <div>推广钱包余额-会员费</div>
      </div>
      <div class="count-item" @click="toList('wallet-extension')">
        <div class="counts">{{wallet.promoteFwMoney||0}}</div>
        <div>推广钱包余额-服务费</div>
      </div>
    </div>
    <div class="count-list three">
      <div class="count-item" @click="toList('wallet-withdrawal')">
        <div class="counts">{{wallet.adminApplyMoney||0}}</div>
        <div>累计提现总支出</div>
      </div>
      <div class="count-item" @click="toList('wallet-transfer')">
        <div class="counts">{{wallet.transferMoney||0}}</div>
        <div>累计转账总支出</div>
      </div>
    </div>
    <!-- 充值模态框 --start-- -->
    <Modal v-model="rechargeModel" title="充值" :loading="rechargeLoading" @on-ok="Recharge" ok-text="充值">
      <div class="recharge-wrapper">
        <div class="title">充值焕贝额</div>
        <Input v-model="rechargeValue" placeholder="请输入..." style="width: 300px"></Input>
      </div>
    </Modal>
    <!-- 充值模态框 --end-- -->
    <!-- 转账模态框 --start-- -->
    <Modal v-model="transferModel" title="发起转账" :loading="transferLoading" @on-ok="Transfer" ok-text="转账">
      <div class="transfer-wrapper">
        <div class="section">
          <div class="title">收款人</div>
          <div class="collection-user">
            <div class="left">
              <Input v-model="payeePhone" @on-change="payeePhoneChange" placeholder="请输入手机号"
                style="width: 300px"></Input>
              <div class="info" v-if="payeeInfo!==''">
                <div class="name">{{payeeInfo.nickName}}</div>
                <div class="vip">{{payeeInfo.gradeText}}</div>
              </div>
            </div>
            <div class="right">
              <img v-if="payeeInfo!==''" class="image" :src="payeeInfo.face">
            </div>
          </div>
        </div>
        <div class="section">
          <div class="title">转账焕贝金额</div>
          <Input v-model="transferValue" placeholder="请输入..." style="width: 300px"></Input>
        </div>
        <div class="section">
          <div class="title">付款钱包</div>
          <Radio-group v-model="transferWallet" vertical>
            <Radio :label="'RECHARGE,'+wallet.rechargeMoney+',充值钱包'">
              <span>充值钱包</span>
              <span>{{wallet.rechargeMoney||0}}</span>
            </Radio>
            <Radio :label="'PROMOTE_HY,'+wallet.promoteHyMoney+',推广钱包余额-会员费'">
              <span>推广钱包余额-会员费</span>
              <span>{{wallet.promoteHyMoney||0}}</span>
            </Radio>
            <Radio :label="'PROMOTE_FW,'+wallet.promoteFwMoney+',推广钱包余额-服务费'">
              <span>推广钱包余额-服务费</span>
              <span>{{wallet.promoteFwMoney||0}}</span>
            </Radio>
          </Radio-group>
        </div>
      </div>
    </Modal>
    <!-- 转账模态框 --end-- -->
    <!-- 提现模态框 --start-- -->
    <Modal v-model="withdrawalModel" title="提现" :loading="withdrawalLoading" @on-ok="Withdrawal" ok-text="提现">
      <div class="transfer-wrapper">
        <div class="section">
          <div class="title">提现焕贝金额</div>
          <Input v-model="withdrawalValue" placeholder="请输入..." style="width: 300px"></Input>
        </div>
        <div class="section">
          <div class="title">付款钱包</div>
          <Radio-group v-model="withdrawalWallet" vertical>
            <Radio :label="'PROMOTE_HY,'+wallet.promoteHyMoney+',推广钱包余额-会员费'">
              <span>推广钱包余额-会员费</span>
              <span>{{wallet.promoteHyMoney||0}}</span>
            </Radio>
            <Radio :label="'PROMOTE_FW,'+wallet.promoteFwMoney+',推广钱包余额-服务费'">
              <span>推广钱包余额-服务费</span>
              <span>{{wallet.promoteFwMoney||0}}</span>
            </Radio>
          </Radio-group>
        </div>
      </div>
    </Modal>
    <!-- 提现模态框 --end-- -->
  </div>
</template>

<script>
  import {
    getWalletAll,
    PlantRecharge,
    UserInfoByPhone,
    PlantTransfer,
    PlantWithdrawal
  } from "@/api/financial.js"
  export default {
    name: "wallet-all",
    data() {
      return {
        wallet: {},
        // 充值 --start
        rechargeModel: false,
        rechargeLoading: true,
        rechargeValue: '', // 充值金额
        // 充值 --end
        // 转账 --start
        transferModel: false,
        transferLoading: true,
        transferValue: '',
        payeePhone: '',
        payeeInfo: '', // 收款人信息
        transferWallet: '', //付款钱包
        // 转账 --end
        // 提现 --start
        withdrawalModel: false,
        withdrawalLoading: true,
        withdrawalValue: '',
        withdrawalWallet: ''
        // 提现 --end
      }
    },
    created() {
      this.initWallet()
    },
    methods: {
      toList(name) {
        this.$router.push({
          name: name
        })
      },
      initWallet() {
        getWalletAll().then((res) => {
          this.wallet = res.result
        })
      },
      // 充值 --start
      rechargeShow() {
        this.rechargeModel = true
      },
      Recharge() {
        if (/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(this.rechargeValue)) {
          PlantRecharge({
            price: this.rechargeValue
          }).then((res) => {
            if (res.success) {
              this.$Notice.success({
                title: '充值成功',
                desc: `焕贝：${res.result.rechargeMoney}</br>时间：${res.result.createTime}`
              });
              this.rechargeValue = ''
              this.rechargeModel = false
              this.initWallet()
            } else {
              this.$Notice.error({
                title: res.result.message,
                desc: ''
              })
            }
          })
        } else {
          this.$Message.warning('请输入正确的金额');
          this.rechargeLoading = false
          setTimeout(() => {
            this.rechargeLoading = true
          }, 200)
        }
      },
      // 充值 --end
      // 转账 --start
      transferShow() {
        this.transferModel = true
      },
      payeePhoneChange(e) {
        let result = /^1[23456789]\d{9}$/.test(this.payeePhone)
        if (result) {
          this.initPayeeInfo()
        } else {
          this.payeeInfo = ''
        }
      },
      initPayeeInfo() {
        UserInfoByPhone(this.payeePhone).then((res) => {
          if (res.success) {
            this.payeeInfo = res.result
          }
        })
      },
      Transfer() {
        if (this.payeeInfo === '') {
          this.$Message.warning('请输入收款人手机号');
          this.transferLoading = false
          setTimeout(() => {
            this.transferLoading = true
          }, 200)
          return
          return
        }
        if (!(/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(this.transferValue))) {
          this.$Message.warning('请输入正确的金额');
          this.transferLoading = false
          setTimeout(() => {
            this.transferLoading = true
          }, 200)
          return
        }
        if (this.transferWallet === '') {
          this.$Message.warning('请选择付款钱包');
          this.transferLoading = false
          setTimeout(() => {
            this.transferLoading = true
          }, 200)
          return
        }
        let transferWallet = this.transferWallet.split(',')
        if (parseFloat(transferWallet[1]) < parseFloat(this.transferValue)) {
          uni.showToast({
            title: "该钱包余额不足",
            icon: 'none'
          })
          return
        }
        let params = {
          owner: transferWallet[0],
          price: this.transferValue,
          mobile: this.payeePhone,
        }
        // 创建转账订单
        PlantTransfer(params).then((res) => {
          if (res.success) {
            this.$Notice.success({
              duration: 20,
              title: '转账成功',
              desc: `焕贝：${res.result.transferMoney}</br>收款人：${res.result.payeeName}</br>收款人账号：${res.result.payeePhone}</br>转账钱包：${transferWallet[2]}</br>时间：${res.result.createTime}</br>流水号：${res.result.sn}`
            });
            this.transferValue = ''
            this.transferModel = false
            this.payeePhone = ''
            this.payeeInfo = '' // 收款人信息
            this.transferWallet = '' //付款钱包
            this.initWallet()
          } else {
            this.$Notice.error({
              title: res.result.message,
              desc: ''
            })
          }
        })
      },
      // 转账 --end
      // 提现 --start
      withdrawalShow() {
        this.withdrawalModel = true
      },
      Withdrawal() {
        if (!(/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(this.withdrawalValue))) {
          this.$Message.warning('请输入正确的金额');
          this.withdrawalLoading = false
          setTimeout(() => {
            this.withdrawalLoading = true
          }, 200)
          return
        }
        let withdrawalWallet = this.withdrawalWallet.split(',')
        if (this.withdrawalWallet === '') {
          this.$Message.warning('请选择付款钱包');
          this.withdrawalLoading = false
          setTimeout(() => {
            this.withdrawalLoading = true
          }, 200)
          return
        }
        if (parseFloat(withdrawalWallet[1]) < parseFloat(this.withdrawalValue)) {
          this.$Message.warning('该钱包余额不足');
          this.withdrawalLoading = false
          setTimeout(() => {
            this.withdrawalLoading = true
          }, 200)
          return
          return
        }
        PlantWithdrawal({
          price: this.withdrawalValue,
          owner: withdrawalWallet[0],
        }).then((res) => {
          if (res.success) {
            this.$Notice.success({
              duration: 20,
              title: '提现成功',
              desc: `焕贝：${this.withdrawalValue}`
            });
            this.withdrawalValue = ''
            this.withdrawalModel = false
            this.withdrawalWallet = '' //付款钱包
            this.initWallet()
          } else {
            this.$Notice.error({
              title: res.result.message,
              desc: ''
            })
          }
        })
      },
      // 提现 --end
    }
  }
</script>

<style lang="scss" scoped>
  .wallet-all-wrapper {
    .operate {
      padding: 32px;
      width: 300px;
      display: flex;
      justify-content: space-between;
    }

    .count-list {
      display: flex;
      margin-bottom: 32px;

      .count-item {
        margin-left: 32px;
        transition: 0.35s;
        width: 240px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border-radius: 0.4em;
        color: #ffffff;
        font-weight: bold;

        .counts {
          font-size: 24px;
        }
      }

      .count-item:hover {
        transform: translateY(-10px);
        z-index: 99;
      }
    }

    .one .count-item {
      background-image: linear-gradient(109.6deg, rgba($color: #ff7171, $alpha: 0.6) 11.2%, #ff7171 100.2%);
      box-shadow: 1px 3px 12px rgba($color: #ff7171, $alpha: 0.3);
    }

    .two .count-item {
      cursor: pointer;
      background-image: linear-gradient(109.6deg, rgba($color: #ffaa71, $alpha: 0.6) 11.2%, #ffaa71 100.2%);
      box-shadow: 1px 3px 12px rgba($color: #ffaa71, $alpha: 0.3);
    }

    .three .count-item {
      cursor: pointer;
      background-image: linear-gradient(109.6deg, rgba($color: #93b5e1, $alpha: 0.6) 11.2%, #93b5e1 100.2%);
      box-shadow: 1px 3px 12px rgba($color: #93b5e1, $alpha: 0.3);
    }

  }

  .recharge-wrapper {
    display: flex;
    align-items: center;

    .title {
      margin-right: 4px;
    }
  }

  .transfer-wrapper {
    .section {
      .title {
        margin-top: 24px;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: bold;
      }

      .collection-user {
        display: flex;

        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .info {
            display: flex;
            margin-top: 8px;

            .name {
              margin-right: 8px;
            }
          }
        }

        .right {
          flex: 0 0 80px;
          height: 80px;

          .image {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
</style>
